iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 7

[Day 7] 阿嬤都看得懂的文字標籤與語意化標籤

  • 分享至 

  • xImage
  •  

阿嬤都看得懂的文字標籤與語意化標籤

昨天我們開始寫第一支 .html 程式了,不過網頁看起來還是太樸素。今天就讓我們介紹更多文字標籤,讓我們的網頁看起來更華麗一些吧!

讓我們再介紹幾個文字經常使用的標籤。在呈現文字的時候,除了段落之外,我們應該很常想到標題 (headline) 吧!但是標題有很多種啊,什麼標題一標題二,每個標題的大小都不太一樣,那該怎麼辦呢?沒關係,我們標題標籤是有編號的,所以我們標題標籤其實是一組,從

  • h1, h2, ... , h6 都有喔!長相分別會是像這樣:

這是標題一

這是標題二

這是標題三

這是標題四

這是標題五
這是標題六
  • 斜體字 (italic),就是 i 囉!看起來會像這樣: Hello, 我是斜體字。 不過,我們還有另個標籤,也讓文字變成斜體:
  • 強調 (emphasized),標籤是 em。奇怪,明明都是畫出同個樣式,為什麼要搞 2 個標籤?這樣不是又要記超多東西嗎?

你是對的,但是讓我們反過來想想,是「斜體字」讓我們知道為什麼要把這段文字改變樣式,還是「強調」呢?當然是「強調」對嗎?各位阿嬤的記憶力都不算太好,有沒有可能之後你看見「斜體字」標籤,卻完全想不起來自己到底在做什麼?沒錯,em 標籤就是提醒我們,這是當初想要強調這段文字。

這種讓標籤不再只是改變樣式,還告訴我們這個標籤在幹嘛的作法,叫作「語意化標籤」(semantic tag)。這樣的作法,不只方便我們閱讀,也方便搜尋引擎閱讀,所以也會讓我們的網頁出現在搜尋結果中比較前面的位置。

咦,你說為什麼重要?當然是因為網頁工程師都很悶騷這樣可以提高網頁的曝光率啊!這種讓網頁出現在搜尋結果中比較前面的位置的策略,就是傳說中的搜尋引擎優化 (SEO) 囉!這也是網頁工程師的管區,會讓我們更受業主青睞喔~

接下來,讓我們再介紹 4 組會幫我們加上樣式的文字標籤:

  • 粗體字 (bold),標籤是 b。沒錯,它和之前的 strong 樣式相同,但是當然是 strong 才是語意化標籤囉,所以我們多用 strong 來取代 b 吧!
  • 橫槓線 (strikethrough)刪除 (deleted),標籤分別是 sdel,會把包含的文字作出用橫槓刪除的樣子;當然,後者是語意化標籤。
  • 畫底線 (underlined),標籤是 u。底線標籤包含的文字,會畫上底線;由於這個標籤沒有語意化的版本,所以強烈建議不要使用,而改採之後使用 CSS 樣式的方式來呈現。
  • 標註 (marked),標籤是 mark。標註標籤包含的文字,預設是加上黃色底色。

今天我們介紹了常見的文字標籤,還有語意化標籤這個重要的概念。不過,想要讓網頁排版變得更美,我們還必須使用之前提到的 div 標籤,幫我們把這些文字內容打包起來。因此,明天就讓我們看看 div 標籤怎麼使用,以及開始幫標籤穿上 CSS 樣式吧!


上一篇
[Day 6] 阿嬤都看得懂的開始寫第一支 .html 檔案囉!
下一篇
[Day 8] 阿嬤都看得懂的替 HTML 標籤穿上行內樣式
系列文
你阿嬤成為網頁前端工程師的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-22 17:36:24

期待阿罵的SEO介紹

阿嬤現在只是成為網頁前端工程師的第一步,要前往 SEO 可能要到第二步或第三步喔喔喔~

我要留言

立即登入留言